<template>
	<view>
		<template v-if="userInfo.id">
			<u-navbar title="兑换" placeholder leftIconSize="0" />
			<u-sticky bgColor="#fff" :customNavHeight="customNavHeight">
				<u-tabs @click="tabClick" lineColor="#e1251b" :list="list1" :scrollable="false"></u-tabs>
			</u-sticky>
			<view class="exchange-box">
				<template v-for="(item, index) in dataList" v-if="current === 0">
					<NoUse :key="index" :item="item"></NoUse>
				</template>
				<template v-else-if="current === 1">
					<Used :key="index" :item="item"></Used>
				</template>
				<u-empty
						v-if="dataList.length===0"
						text=" "
				        mode="data"
				        icon="http://cdn.uviewui.com/uview/empty/data.png"
				>
				</u-empty>
			</view>
			<u-loadmore :status="status" />
		</template>
		<template v-else>
			<view style="height: 80vh;display: flex;flex-direction: column; align-items: center;justify-content: center;">
				<u-empty
						text="用户未登录"
				        mode="permission"
				        icon="http://cdn.uviewui.com/uview/empty/permission.png"
				>
				</u-empty>
				<view style="height: 32rpx;"/>
				<view>
					<u-button @click="toLogin" color="#e1251b" text="点击登录" shape="circle"></u-button>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {propertyPointGoodsRecord} from '@/api/home.js';
	import NoUse from '@/components/noUse.vue';
	import Used from '@/components/used.vue';
	import {mapState} from 'vuex';
	export default {
		components: {
			NoUse,
			Used
		},
		data() {
			return {
				list1: [{
					name: '待兑换',
				}, {
					name: '已兑换',
				}],
				dataList: [],
				loading: false,
				status: 'loadmore',
				pageNo: 1,
				pageSize: 6,
				current: 0
			}
		},
		computed: {
			...mapState(['userInfo']),
			customNavHeight() {
				return this.statusBarHeight + 44 + 'px';
			}
		},
		onShow() {
			this.propertyPointGoodsRecord();
		},
		onReachBottom() {
			if(this.status === 'loading') {
				this.propertyPointGoodsRecord();
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.pageNo = 1;
			this.propertyPointGoodsRecord();
		},
		methods: {
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			tabClick({index}) {
				this.current = index;
				this.dataList = [];
				this.pageNo = 1;
				this.propertyPointGoodsRecord();
			},
			// 获取通知消息列表
			propertyPointGoodsRecord() {
				if(!this.userInfo.id) {
					uni.stopPullDownRefresh();
					return
				}
				if(this.pageNo === 1) {
					this.loading = true;
				}
				let postObj = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					status: this.current
				}
				this.$cuLoading('加载中...').then(() => {
					propertyPointGoodsRecord(postObj).then(res => {
						const {current, pages, records} = res.result;
						if(this.pageNo === 1) {
							let empty = [];
							this.dataList = empty.concat(records);
						} else {
							this.dataList = this.dataList.concat(records);
						}
						if(current >= pages) {
							this.status = 'nomore'
						} else {
							this.pageNo ++;
							this.status = 'loading'
						}
					}).finally(() => {
						uni.stopPullDownRefresh();
						this.loading = false;
						uni.hideLoading()
					});
				})
			},
		},
		
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.exchange-box {
		padding: $uni-padding;
	}
</style>
